<template>
    <!-- 页面logo -->
    <el-link class="iconImg" underline="never">
        <LottieAnimation :animation-data="animationData" :auto-play="true" :loop="true" style="width: 3vw;"
            @click="returnLayout" />
    </el-link>

    <el-input v-model="searchMsg" style="width: 20vw;height: 2vw;" placeholder="热搜" />
    <el-button type="primary" class="searchButton" @click="turnSearch">
        <Search style="width: 1vw; height: 1vw; margin-right: 1vw" />搜索
    </el-button>

    <el-popover placement="bottom" class="el-popover">
        <div style="text-align: center; margin: 0;">
            <ul>
                <li>
                    <p><strong>{{ userMessage.nickname }}</strong></p>
                </li>
                <li>
                    <router-link :to="{ name: 'myrecipe' }"><el-link underline="never">我的食谱</el-link></router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'mycollect' }"><el-link underline="never">我的收藏</el-link></router-link>
                </li>
                <li>
                    <router-link :to="{ name: 'myfocus' }"><el-link underline="never">我的关注</el-link></router-link>
                </li>

                <li>
                    <el-link underline="never" @click="logOut">退出</el-link>
                </li>
            </ul>
        </div>
        <template #reference>
            <el-link type="primary" class="userImg" @click="turnUser" underline="never">
                <el-image :src="userMessage.avatarUrl" style="width: 3vw;height: 3vw;"></el-image>
            </el-link>
        </template>
    </el-popover>


    <el-link type="primary" class="createCook" @click="turnCreate" underline="never">
        <el-button type="primary">创作食谱 +</el-button>
    </el-link>
    <div class="message">
        <Message @click="turnChat" class="messageIcon" style="width: 3vw; height: 3vw; margin-right: 1vw" />
        <div class="redDot" v-show="wsStrore.unCheckNum==0?false:true">{{ wsStrore.unCheckNum }}</div>
    </div>

</template>

<script setup lang="ts">
import axios from 'axios';
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { LottieAnimation } from "lottie-web-vue";
import animationData from '../../assets/Animation - 1746967367807.json';
import { useWebSocketStore } from '@/stores/websocket';

const wsStrore = useWebSocketStore()
// 获取用户部分信息可以放入pinia给全体组件进行使用，优化代码部分，以后可以做
// 用户部分信息对象接口
interface userMe {
    id: number
    nickname: string
    avatarUrl: string
    isAdmin: number
}
let userMessage: userMe = reactive({//为用户部分信息对象设置默认值
    id: 0,
    nickname: '加载中',
    avatarUrl: '',
    isAdmin: 0
})
// axios获取后端传来的数据
axios({
    url: '/api/user/getPartUserInfo',
}).then(res => {
    // 使用reactive绑定响应式的变量需要使用Object.assign进行赋值
    Object.assign(userMessage, res.data.data)
})


const router = useRouter()//可以操作路由


// 搜索路由未完成
let searchMsg = ref('')
function turnSearch() {
    // router.go({
    //     path:'/research'
    // })
}

// 点击个人头像跳转个人中心
function turnUser() {
    router.push({
        path: '/usercenter'
    })
}

// 点击创作食谱按钮跳转创作食谱
function turnCreate() {
    router.push({
        path: '/createcook'
    })
}

// 个人头像下的退出，个人中心退出登录
async function logOut() {
    await axios({
        url: '/api/user/logout',
        method: 'post'
    })
    wsStrore.disconnect()
    router.push({
        path: '/login'
    })

}

// 点击logo则返回主页
function returnLayout() {
    router.push({
        path: '/layout'
    })
}

// 后续完成跳转至我的食谱
// function toMyRecipe(){
//     router.push({
//         name:'myrecipe'

//     })
// }


function turnChat() {
    router.push({
        path: '/chat'
    })
}

</script>

<style scoped>
* {
    font-size: 1vw;
}

.el-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    height: 80px;
}

.iconImg {
    cursor: pointer;
    /* transition: transform 0.3s ease; */
}


.el-input {
    /* padding: 10vw 0.5vw; */
    margin-left: 30vw;
    max-width: 500px;
    border-radius: 1vw;
}

.searchButton {
    margin: 0 1vw;
    border-radius: 1vw;
    background: #FF6B35;
    border: none;
    padding: 0 20px;
    height: 2vw;
    transition: all 0.3s ease;
    margin-right: 20vw;
    width: 5vw;
}

.searchButton:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

.userImg {
    margin-right: 3vw;
    cursor: pointer;
    transition: all 0.3s ease;
}

.userImg:hover {
    transform: scale(1.05);
}

.userImg .el-image {
    border-radius: 50%;
    border: 2px solid #FFE8CC;
}

.createCook .el-button {
    background: #FF6B35;
    border: none;
    border-radius: 1.5vw;
    padding: 0 20px;
    height: 3vw;
    transition: all 0.3s ease;
    width: 6vw;
}

.createCook .el-button:hover {
    background: #FF8C42;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}

.el-popover {
    width: 15vw;
    border-radius: 12px;
}

.el-popover ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.el-popover ul li .el-link {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 8px 0;
}

.el-popover ul li:last-child {
    border-bottom: none;
}

.el-popover ul li:hover {
    background: #FFF9F0;
}

.el-link {
    color: #333;
    transition: color 0.3s ease;
}

.el-link:hover {
    color: #FF6B35;
}

.messageIcon {
    margin-left: 20px;
}

.messageIcon:hover {
    cursor: pointer;
}
.message{
    position: relative;
}
.redDot{
    position: absolute;
    right: 10px;
    top: -5px;
    width: 25px;
    height: 25px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    font-size: 12px;
    color:white;
}
</style>
